@use "../../variables" as *;

svc-page-navigator,
.svc-page-navigator {
  display: flex;
  flex-direction: column;
  gap: var(--ctr-page-navigator-gap, var(--sjs-spacing-x2));
}

.svc-page-navigator__button-icon {
  display: block;
  width: var(--ctr-page-navigator-button-icon-width, var(--sjs-font-size-x3));
  height: var(--ctr-page-navigator-button-icon-height, var(--sjs-font-size-x3));
  padding: var(--ctr-page-navigator-button-padding, var(--sjs-spacing-x1));
  border-radius: var(--ctr-page-navigator-button-corner-radius, var(--sjs-corner-radius-x1));
  overflow: visible;
  transition: background-color $creator-transition-duration;
  box-sizing: content-box;

  .sv-svg-icon {
    width: var(--ctr-page-navigator-button-icon-width, var(--sjs-font-size-x3));
    height: var(--ctr-page-navigator-button-icon-height, var(--sjs-font-size-x3));
  }

  use {
    fill: var(--ctr-page-navigator-button-icon-color, var(--sjs-layer-3-foreground-75, #000000bf));
    transition: fill $creator-transition-duration;
  }
}

.svc-page-navigator__button {
  --ctr-page-navigator-button-double-padding: calc(2 * var(--ctr-page-navigator-button-padding, var(--sjs-spacing-x1)));
  --ctr-page-navigator-button-width: calc(var(--ctr-page-navigator-button-icon-width, var(--sjs-font-size-x3)) + var(--ctr-page-navigator-button-double-padding));
  --ctr-page-navigator-button-height: calc(var(--ctr-page-navigator-button-icon-height, var(--sjs-font-size-x3)) + var(--ctr-page-navigator-button-double-padding));
  width: var(--ctr-page-navigator-button-width);
  height: var(--ctr-page-navigator-button-height);

  padding: 0;
  cursor: pointer;
  border: none;
  background-color: transparent;

  &:hover,
  &:focus-visible {
    outline: none;

    .svc-page-navigator__button-icon {
      background-color: var(--ctr-page-navigator-button-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));

      use {
        fill: var(--ctr-page-navigator-button-icon-color-hovered, var(--sjs-layer-3-foreground-75, #000000bf));
      }
    }
  }
}

.svc-page-navigator__button:disabled,
.svc-page-navigator__button:disabled:hover {
  opacity: var(--ctr-page-navigator-button-icon-opacity-disabled, 0.25);
  background-color: transparent;
  cursor: default;
  pointer-events: none;

  use {
    fill: var(--ctr-page-navigator-button-icon-color-disabled, var(--sjs-layer-3-foreground-100, #000000e6));
  }
}

.svc-page-navigator-item--disabled {
  .svc-page-navigator-item__banner {
    color: var(--ctr-page-navigator-button-icon-color-disabled, var(--sjs-layer-3-foreground-100, #000000e6));
    opacity: var(--ctr-page-navigator-button-icon-opacity-disabled, 0.25);
  }
}

.svc-page-navigator__button--pressed,
.svc-page-navigator__button:active {
  .svc-page-navigator__button-icon {
    background: var(--ctr-page-navigator-button-background-color-pressed, var(--sjs-primary-background-10, #19b3941a));
    opacity: var(--ctr-page-navigator-button-opacity-pressed, 0.5);

    use {
      fill: var(--ctr-page-navigator-button-icon-color-hovered, var(--sjs-layer-3-foreground-75, #000000bf));
    }
  }
}

.svc-page-navigator__button--active,
.svc-page-navigator__button--active:hover {
  .svc-page-navigator__button-icon {
    background: var(--ctr-page-navigator-button-background-color-checked, var(--sjs-primary-background-10, #19b3941a));

    use {
      fill: var(--ctr-page-navigator-button-icon-color-checked, var(--sjs-primary-background-500, #19b394ff));
    }
  }
}

.svc-page-navigator__popup {
  min-width: calcSize(12.5);
}

.svc-tab-designer__page-navigator {
  display: flex;
  flex-grow: 1;
}